<!--
 * @Author: TJN tjn@246@126.com
 * @Date: 2024-03-28 00:12:40
 * @LastEditors: TJN tjn@246@126.com
 * @LastEditTime: 2024-03-28 00:48:57
 * @FilePath: \mapview\src\components\HistoricalList.vue
 * @Description: 
 * 
 * Copyright (c) 2024 by ${git_name_email}, All Rights Reserved. 
-->
<template>
    <div class='historical-list'>
    <!-- <img src="../../assets/img/yuan/yuan.png"/> -->
    <div class="border--top-left border-view"></div>
    <div class="border--top-right border-view"></div>
    <div class="border--bottom-left border-view"></div>
    <div class="border--bottom-right border-view"></div>
        <div class="table">
            <div class="table-title">
                <div class="table-title-one">车牌号</div>
                <div class="table-title-three">车位</div>
                <div class="table-title-two">入场时间</div>
                <div class="table-title-one">停留时长</div>
				        <div class="table-title-one">预警类型</div>
                <div class="table-title-one" style="padding-right: 18px;">是否黑名单</div>

            </div>
            <div class="table-list" ref="historicalList">
                    <div class="historical-list-item" v-for="(item,index) in dataType?lishiDataOne:lishiDataTow" :key="index" >
                      <div class="table-title-one">{{ item.paizi }}</div>
                      <div class="table-title-one">{{ item.chewei }}</div>
                      <div class="table-title-two">{{ item.ruchangshijian }}</div>
                      <div class="table-title-one ">{{item.tingliushijian}}</div>
                      <div class="table-title-one">{{ item.yujing }}</div>
                      <div class="table-title-one" style="padding-right: 15px;">{{ item.heimingdan }}</div>
                      
            </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data () {
        return {
            isShow:false,
            dataType:true,
            lishiDataOne:[
                {
		'chewei':'2',
		'ruchangshijian':'2024-03-17 09:23:13',
		'tingliushijian':'2小时23分',
		'paizi':'辽BHF240',
		'yujing':'烟',
		'heimingdan':'否',
	},
	{
		'chewei':'1',
		'ruchangshijian':'2024-03-17 12:11:56',
		'tingliushijian':'1小时20分',
		'paizi':'吉A7M31S',
		'yujing':'火',
		'heimingdan':'是',
	},
	{
		'chewei':'3',
		'ruchangshijian':'2024-03-17 14:13:44',
		'tingliushijian':'1小时23分',
		'paizi':'辽CH0878',
		'yujing':'烟',
		'heimingdan':'否',
	},
	{
		'chewei':'1',
		'ruchangshijian':'2024-03-17 15:29:14',
		'tingliushijian':'1小时40分',
		'paizi':'黑A6R186',
		'yujing':'火',
		'heimingdan':'否',
	},
	{
		'chewei':'2',
		'ruchangshijian':'2024-03-18 10:20:14',
		'tingliushijian':'2小时23分',
		'paizi':'吉DN2372',
		'yujing':'火',
		'heimingdan':'否',
	},
	{
		'chewei':'1',
		'ruchangshijian':'2024-03-18 12:34:34',
		'tingliushijian':'1小时02分',
		'paizi':'辽B5R1V1',
		'yujing':'火',
		'heimingdan':'是',
	},
	{
		'chewei':'2',
		'ruchangshijian':'2024-03-18 14:01:25',
		'tingliushijian':'1小时29分',
		'paizi':'辽AEJ193',
		'yujing':'烟',
		'heimingdan':'否',
	},
	{
		'chewei':'3',
		'ruchangshijian':'2024-03-19 09:22:43',
		'tingliushijian':'0小时20分',
		'paizi':'辽BXK131',
		'yujing':'烟',
		'heimingdan':'否',
	},
	{
		'chewei':'2',
		'ruchangshijian':'2024-03-19 13:44:04',
		'tingliushijian':'1小时13分',
		'paizi':'琼BTU571',
		'yujing':'火',
		'heimingdan':'否',
	},
	{
		'chewei':'1',
		'ruchangshijian':'2024-03-20 09:22:44',
		'tingliushijian':'1小时33分',
		'paizi':'辽B2G66C',
		'yujing':'烟',
		'heimingdan':'否',
	},
	{
		'chewei':'2',
		'ruchangshijian':'2024-03-20 12:06:33',
		'tingliushijian':'1小时15分',
		'paizi':'辽B7G9B8',
		'yujing':'烟',
		'heimingdan':'是',
	},

            ],
            lishiDataTow:[
                {
                    'lei':'危化品车辆',
                    'shijian':'2024-03-21 11:05:22',
                    'paizi':'豫A2Y234',
                    'baojing':'未处理',
                    'xiaoxi':'危化品车辆未停在指定位置',
                },

            ],
        }
    },
    components: {
        
    },
    created() {
        
    },
     destroyed() {
    // 在组件销毁时清除定时器
    clearInterval(this.scrollInterval);
  },
  mounted() {
    const historicalList = this.$refs.historicalList;
    // 开始自动滚动
    this.startAutoScroll(historicalList);
  },
    methods: {
        startAutoScroll(container) {
    let startTime = null;
    let duration = 5000; // 滚动到顶部的持续时间增加为2秒
    const distance = container.scrollHeight; // 滚动的距离为容器的高度

    const animateScroll = timestamp => {
        if (!startTime) startTime = timestamp;
        const elapsed = timestamp - startTime;
        const progress = elapsed / duration;

        container.scrollTop = progress * distance;

        if (elapsed < duration) {
            requestAnimationFrame(animateScroll);
        } else {
            // 滚动完成后重置起始时间并滚动到顶部
            startTime = null;
            container.scrollTop = 0;
            // 重新开始自动滚动
            requestAnimationFrame(animateScroll);
        }
    };

    requestAnimationFrame(animateScroll);
},
scrollToBottom(container) {
    // 计算下一次滚动的位置，可以根据需要调整滚动的速度
    const scrollAmount = 5; // 每次滚动的距离
    const newScrollTop = container.scrollTop + scrollAmount;
    // 平滑滚动至新位置
    container.scrollTop = newScrollTop;
}
    },
};
</script>

<style  scoped>
.historical-list{
    color: #fff;
    position:relative;
    width: 100%;
    border:2px solid #80BCF3;
    border-radius: 10px;
    margin-top: 20px;
    padding:8px;
    height:calc( 300px);
    height:300px;
    /* 创建伪元素来覆盖角落 */

}
.historical-list-title{
    height: 30px;
    border-bottom: 2px solid #fff;

}

.historical-list-item{
    display: flex;
    width: 100%;
    /* justify-content: space-around; */
    height: 40px;
    /*border-bottom: 1px solid #fff;*/
    align-items: center;
    text-align: center;

}

.table-title{
    display: flex;
    /*border-bottom: 1px solid #fff;*/
    height: 40px;
    align-items: center;
	/*background-color: #0091FF;*/
    
}

.table-list{
    height: calc( 100% / 50px);
    height:270px;
    overflow-y: scroll;
}
.table-title-one{
    text-align: center;
	flex:1;
    text-align: center;

}

.table-title-two{
    text-align: center;
	flex:2;
    text-align: center;

}

.table-title-three{
	flex:1;
    text-align: center;

    text-align: center;
}

.table-title-four{
    text-align: center;
    flex:1;
    text-align: center;

}


.table-title-five{
    text-align: center;
    flex:2.5;
    text-align: center;
    font-size:12px

}


.historical-list-item:nth-child(odd){
	/*background-color: #0091FF;*/
	color:#0091FF;
    color: #fff;
}

.historical-list-item:nth-child(even){
	/*background-color: #09DEFF;*/
	color:#09DEFF;
    color: #fff;
}


.dialog-view {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999999999;
  top:0;
  left:0;
}

.dialog-view-content{
 height: 581px;
    width: 900px;
   position: relative;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   background-image: url('../../assets/img/bg2.svg');
/* 背景图片铺满整个元素 */
  background-size: cover;

  /* 确保背景图片不重复 */
  background-repeat: no-repeat;

  /* 确保背景图片随元素一起缩放 */
  background-attachment: fixed;

  /* 确保背景图片在元素内居中 */
  background-position: center;
}

.dialog-view-title{
  padding: 30px 46px;
    display: flex;
    height: 40px;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0px;
}
.dialog-view-title .title{
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}
.element{
  font-size: 20px;
  font-weight: 700;
  color: #fff;
}
.element:hover {
  cursor: pointer;
}
.dialog-view-title div{
    font-size: 18px;
    font-weight: 700;
    color: #fff;
}
.dialog-view-content-box{
  display:flex;
  padding:10px 60px;
}
.dialog-view-content-box-left .dialog-view-content-box-left-img{
  margin-bottom: 20px;
}
.dialog-view-content-box-left .dialog-view-content-box-left-img p{
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}
.dialog-view-content-box-left .dialog-view-content-box-left-img img{
    width:343.8px;
    height: 249px;
}
.dialog-view-content-box-left-text{
  margin-bottom: 20px;
}
.dialog-view-content-box-left .dialog-view-content-box-left-text .title{
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}
.main-text{
  font-size: 16px;
    font-weight: 700;
    color: red;
}
.dialog-view-content-box-right{
  margin-left: 50px;
}
.dialog-view-content-box-right-text .title{
    font-size: 16px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 10px;
}
.dialog-view-content-box-right-btn{
  height: 210px;
  text-align: right;
  text-align: center;
    display: flex;
    justify-content: end;
    align-items: self-end;
}
.dialog-view-content-box-right-btn div{
    width: 166px;
    height: 52px;
    line-height: 52px;
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    margin-left: 10px;

    background-color: #09DEFF;
    border-radius: 5px;
   background-image: url('../../assets/img/btn.png');
/* 背景图片铺满整个元素 */
  background-size: cover;

  /* 确保背景图片不重复 */
  background-repeat: no-repeat;

  /* 确保背景图片随元素一起缩放 */
  background-attachment: fixed;

  /* 确保背景图片在元素内居中 */
  background-position: center;
}
.table-list::-webkit-scrollbar {
  width: 10px; /* Set the width of the scrollbar */
}

/* Track */
.table-list::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1); /* Set the background color of the track */
}

/* Handle */
.table-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.1); /* Set the color of the scrollbar handle */
  border-radius: 5px; /* Add rounded corners to the scrollbar handle */
}
</style>